<template >
  <el-main>
    <!-- 面包屑 -->
    <el-breadcrumb :separator-icon="ArrowRight">
      <el-breadcrumb-item class="font-bold">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商家管理</el-breadcrumb-item>
    </el-breadcrumb>
    <br>
    <!-- 搜索框 -->
    <el-row :gutter="10" style="margin: left 100px;" v-model="formInline">
      <span style="margin-left: 10px; margin-top: 5px;">搜索：</span>
      <el-col :span="6">
        <el-input type="text" v-model="formInline.userName" placeholder="请输入店主昵称"></el-input>
      </el-col>
      <el-col :span="6">
        <el-input type="text" v-model="formInline.businessName" placeholder="请输入店铺名"></el-input>
      </el-col>
      <el-col :span="3">
        <el-button type="primary" plain size="medium" @click="getData(formInline)">搜索</el-button>
      </el-col>
    </el-row>
    <!-- 表格 -->
    <div class="mt-4">
      <el-table :data="tableData" style="font-size: 12px;">
        <el-table-column prop="businessId" label="商家id" width="110"></el-table-column>
        <el-table-column prop="businessName" label="商家名称" width="150"></el-table-column>
        <el-table-column prop="userName" label="店主" width="150"></el-table-column>
        <el-table-column prop="businessAddress" label="商家地址" width="130"></el-table-column>
        <el-table-column prop="businessPhone" label="商家联系方式" width="110"></el-table-column>
        <el-table-column prop="businessProfile" label="店铺简介" width="300"></el-table-column>
        <el-table-column prop="businessStatus" label="店铺状态" width="80"></el-table-column>
        <el-table-column fixed="right" label="操作" width="150">
          <template #default="scope">
            <el-button type="primary" size="small" @click.prevent="updateBusinessStatusSuccess(scope.row.id)"
              v-if="scope.row.businessStatus === 1">通过</el-button>
            <el-button type="danger" size="small" @click.prevent="updateBusinessJoinBlackList(scope.row.id)"
              v-if="scope.row.businessStatus == 0">加入黑名单</el-button>
            <el-button type="success" size="small" @click.prevent="updateBusinessRemoveBlackList(scope.row.id)"
              v-if="scope.row.businessStatus == 3">移出黑名单</el-button>
            <el-button type="danger" size="small" @click.prevent="deleteBusiness(scope.row.id)"
              v-if="scope.row.businessStatus == 1">删除</el-button>
            <el-button type="primary" plain size="small" v-if="scope.row.businessStatus == 4">店铺已注销</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination class="text-center mt-4" @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="query.pageNum" :page-sizes="[10, 20, 50]" :page-size="query.pageSize"
        layout="total, sizes, prev, pager, next, jumper" :total="query.total">
      </el-pagination>
    </div>
  </el-main>
</template>

<script >
import { ArrowRight } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import axios from 'axios'
export default {
  data() {
    return {
      formInline: {// 搜索栏
        userName: '',
        businessName: '',
      },
      tableData: [],// 数据接收
      query: {//分页数据
        pageNum: 1,
        pageSize: 10,
        total: 5,
      }
    };
  },
  mounted() {
    this.getData()// 钩子函数，加载数据
  },
  methods: {
    getData() {
      axios( {
        url: 'http://127.0.0.1:8081/api/admin/selectBusinessByQuery',
        method: 'post',
        params: {
          token: window.localStorage.getItem( "adminToken" ),
          userName: this.formInline.userName,
          businessName: this.formInline.businessName,
          limit: this.query.pageSize,
          page: this.query.pageNum,
        },
      } ).then( res => {
        if ( res.data.success === false ) { // 没有卡片；卡片过期；卡片伪造时
          window.localStorage.removeItem( "adminToken" ) // 删除卡片，跳转到登录页面
          this.$router.push( '/admin/login' )
        } else {
          // 数据接收
          this.tableData = res.data.data.businessList
          this.query.total = res.data.data.total
        }
      } )
    },
    //切换当前页显示的数据条数，执行方法
    handleSizeChange( val ) {
      this.query.pageSize = val
      this.getData()
    },
    //切换页数，执行方法
    handleCurrentChange( val ) {
      this.query.pageNum = val
      this.getData()
    },
    // 店铺审核通过
    updateBusinessStatusSuccess( id ) {
      axios( {
        url: 'http://127.0.0.1:8081/api/admin/updateBusinessStatusSuccess',
        method: 'post',
        params: {
          token: window.localStorage.getItem( "adminToken" ),
          id: id,
        },
      } ).then( res => {
        if ( res.data.success === false ) { // 没有卡片；卡片过期；卡片伪造时
          window.localStorage.removeItem( "adminToken" ) // 删除卡片，跳转到登录页面
          this.$router.push( '/admin/login' )
        } else {
          this.$message.success( res.data.message )
          this.getData()
        }
      } )
    },
    // 删除店铺
    deleteBusiness( id ) {
      ElMessageBox.confirm(
        '确认删除该商家吗？',
        '删除',
        {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning',
        }
      ).then( () => {
        axios( {
          url: 'http://127.0.0.1:8081/api/admin/deleteBusiness',
          method: 'post',
          params: {
            token: window.localStorage.getItem( "adminToken" ),
            id: id,
          },
        } ).then( res => {
          if ( res.data.success === false ) { // 没有卡片；卡片过期；卡片伪造时
            window.localStorage.removeItem( "adminToken" ) // 删除卡片，跳转到登录页面
            this.$router.push( '/admin/login' )
          } else {
            this.$message.success( res.data.message )
            this.getData()
          }
        } )
      } ).catch( () => {
        ElMessage( {
          type: 'info',
          message: '取消删除商家',
        } )
      } )
    },
    // 加入黑名单
    updateBusinessJoinBlackList( id ) {
      ElMessageBox.confirm(
        '确认将该商家移入黑名单吗？',
        '加入黑名单',
        {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning',
        }
      ).then( () => {
        axios( {
          url: 'http://127.0.0.1:8081/api/admin/updateBusinessJoinBlackList',
          method: 'post',
          params: {
            token: window.localStorage.getItem( "adminToken" ),
            id: id,
          },
        } ).then( res => {
          if ( res.data.success === false ) { // 没有卡片；卡片过期；卡片伪造时
            window.localStorage.removeItem( "adminToken" ) // 删除卡片，跳转到登录页面
            this.$router.push( '/admin/login' )
          } else {
            this.$message.success( res.data.message )
            this.getData()
          }
        } )
      } ).catch( () => {
        ElMessage( {
          type: 'info',
          message: '取消移入商家黑名单',
        } )
      } )
    },
    // 移出黑名单
    updateBusinessRemoveBlackList( id ) {
      axios( {
        url: 'http://127.0.0.1:8081/api/admin/updateBusinessRemoveBlackList',
        method: 'post',
        params: {
          token: window.localStorage.getItem( "adminToken" ),
          id: id,
        },
      } ).then( res => {
        if ( res.data.success === false ) { // 没有卡片；卡片过期；卡片伪造时
          window.localStorage.removeItem( "adminToken" ) // 删除卡片，跳转到登录页面
          this.$router.push( '/admin/login' )
        } else {
          this.$message.success( res.data.message )
          this.getData()
        }
      } )
    },
  }
};
</script>
<style scoped></style>